<template>
	<view class="pay-password">
	    <view class="pwd-bg" @click='hide'></view>
	    <view class="pwd-box">
			<view class="tit">
				<image src="../../static/img/back.png" @click='hide'></image>
				<text>输入交易密码</text>
			</view>
	        <view class="pwd-list">
	            <view>{{password.length >= 1 ? '●' : ''}}</view>
	            <view>{{password.length >= 2 ? '●' : ''}}</view>
	            <view>{{password.length >= 3 ? '●' : ''}}</view>
	            <view>{{password.length >= 4 ? '●' : ''}}</view>
	            <view>{{password.length >= 5 ? '●' : ''}}</view>
	            <view>{{password.length >= 6 ? '●' : ''}}</view>
	        </view>
	        <view class="pwd-link" v-if="navShow">
	            <navigator url="/pages/my/pass/dealpass">忘记交易密码？</navigator>
	        </view>
	        <view class="pwd-keys">
	            <view  @click="keysOn(1)">1</view>
	            <view  @click="keysOn(2)">2</view>
	            <view  @click="keysOn(3)">3</view>
	            <view  @click="keysOn(4)">4</view>
	            <view  @click="keysOn(5)">5</view>
	            <view  @click="keysOn(6)">6</view>
	            <view  @click="keysOn(7)">7</view>
	            <view  @click="keysOn(8)">8</view>
	            <view  @click="keysOn(9)">9</view>
	            <view class="no-bg"></view>
	            <view  @click="keysOn(0)">0</view>
	            <view class="no-bg" @click="keysOn('del')"><image class="iconfont slj-iconfontcha" src="../../static/img/delBtn.png" alt=""></image></view>
	        </view>
	    </view>
	</view>
</template>

<script>
	export default{
		props:{
			navShow:{
				type: Boolean,
				default: false
			}
		},
		data(){
			return {
				password: [],
			}
		},
		methods:{
			keysOn(key){
				var $this = this;
			    if(key != 'del'){
			        if(this.password.length < 6){
			            this.password.push(key);
			            if(this.password.length == 6){
							var paypsd = this.password.join('');
							this.$emit("doSubmit", paypsd);
			            }
			        }
			    }else{
			        this.password.pop();
			    }
			},
			hide(){
				this.password = [];
				var paypsd = this.password.join('');
				this.$emit("hide", paypsd);
			},
		}
	}
</script>

<style lang="scss" scoped>
	/* 密码框 */
	.pwd-bg{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .5);z-index: 99;}
	.pwd-box{position: fixed; bottom: 0; left: 0; width: 100%; height: 400px; background: #fff; color: #333;z-index: 100;
		.tit{
			display: flex;
			align-items: center;
			image{width: 20px;height: 20px;margin-left: 4%;}
			text{ text-align: center; font-size: 18px; padding: 22px; flex: 1}
		}
		
		.pwd-list{ overflow: hidden; padding: 0 22px;display: flex; align-items: center;
		    view{ flex: 1; height: 50px; line-height: 50px; font-size: 30upx;  background: #fff; border: 1px #f0f0f0 solid; border-left: none; text-align: center;}
		    view:first-child{ margin-left: 0; border-left: 1px #f0f0f0 solid;}
		}
	    .pwd-link{ margin-top: 10px; text-align: right; color: #7f8389; font-size: 28upx; padding: 0 22px;}
	    .pwd-keys{ width: 100%; background: #d1d5db; height: 225px; position: absolute; bottom: 0; padding-top: 5px;display: flex;flex-wrap:wrap; align-items: center;
	        view{ text-align: center; margin: 0 0 5px 5px; margin-top: 0; width: calc((100% - 20px) / 3); height: 50px; line-height: 50px; background: #fff; border-radius: 5px; border-bottom: 1px #999 solid; font-size: 36upx;}
	        view.no-bg{ background: none; border:none;
	            // i{ font-size: @fontsize + 7;}
				image{width: 30px;height: 40upx;}
	        }
	        view:active{ background: #f0f0f0;}
	    }
	}
</style>
